<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-07-23 15:39:11
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-09-24 09:56:51
 * @FilePath: \fbhgl_client\src\pages\park\booking-management\whitelist\index.page.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { createState } from "./state";
import { jeecgBootHomeOpUsingPost } from "@/genapi/exam";

defineOptions({ name: "IndexPage" });
const { page, detailDialogRef } = createState();

const img = import.meta.glob("./assets/*.png", {
	import: "default",
	eager: true,
});

const getStatData = async () => {
	const res = await jeecgBootHomeOpUsingPost({});
  // console.log(res)
	if (res && res.code === 200) {
		let stat1 = res.result.items;
		statisticData1.value[0].count = stat1[4].total;
		statisticData1.value[0].subCount = stat1[4].growthXd;
		statisticData1.value[1].count = stat1[2].total;
		statisticData1.value[1].subCount = stat1[2].growthXd;
		statisticData1.value[2].count = stat1[3].total;
		statisticData1.value[2].subCount = stat1[3].growthXd;
		statisticData1.value[3].count = stat1[0].total;
		statisticData1.value[3].subCount = stat1[0].growthXd;
		statisticData1.value[4].count = stat1[1].total;
		statisticData1.value[4].subCount = stat1[1].growthXd;

		let total = res.result.progressStatus.data.reduce(
			(accumulator, currentValue) => accumulator + currentValue,
			0,
		);
		echartData[0].value = res.result.progressStatus.data[0];
		echartData[1].value = res.result.progressStatus.data[1];
		echartData[2].value = res.result.progressStatus.data[2];
		option1.series[0].data = echartData;
		option1.title[0].text =
			"{name|" + "培训报名" + "}\n{val|" + formatNumber(total) + "}";
		const chart1 = echarts.init(document.getElementById("chartBox1"));
		chart1.setOption(option1);

		option2.xAxis[0].data = res.result.passRate.names;
		option2.series[0].data = res.result?.passRate.data;
		const chart2 = echarts.init(document.getElementById("chartBox2"));
		chart2.setOption(option2);

		option3.xAxis[0].data = res.result.trainExamCount.axials;
		option3.series[0].data = res.result?.trainExamCount.dataA;
		option3.series[1].data = res.result?.trainExamCount.dataB;
		const chart3 = echarts.init(document.getElementById("chartBox3"));
		chart3.setOption(option3);

		tableData.value = res.result.orgCadetsCounts;
	}
};

onMounted(() => {
	getStatData();
});

const statisticData1 = ref([
	{
		title: "试题总数",
		count: 1096,
		subCount: 123,
		subTitle: "30天内新增试题数",
		unit: "道",
		img: img["./assets/icon1.png"],
	},
	{
		title: "入驻企业总数",
		count: 1002,
		subCount: 12,
		subTitle: "30天内新增入驻企业",
		unit: "家",
		img: img["./assets/icon2.png"],
	},
	{
		title: "参与培训人数",
		count: 1902,
		subCount: 60,
		subTitle: "7天内新增报名培训人数",
		unit: "人",
		img: img["./assets/icon3.png"],
	},
	{
		title: "考核通过人数",
		count: 1028,
		subCount: 102,
		subTitle: "30天内考核通过",
		unit: "人",
		img: img["./assets/icon4.png"],
	},
	{
		title: "考试场次",
		count: 35,
		subCount: 2,
		subTitle: "7天内新增考试场次",
		unit: "次",
		img: img["./assets/icon5.png"],
	},
]);

function toThousands(num) {
	var result = [],
		counter = 0;
	num = (num || 0).toString().split("");
	for (var i = num.length - 1; i >= 0; i--) {
		counter++;
		result.unshift(num[i]);
		if (!(counter % 3) && i != 0) {
			result.unshift(",");
		}
	}
	return result.join("");
}

let bgColor = "#fff";
let title = "培训报名";
let color = ["#25DDA1", "#313CA9", "#249EFF"];
let echartData = [
	{
		name: "未开始",
		value: "3720",
	},
	{
		name: "进行中",
		value: "2920",
	},
	{
		name: "已完成",
		value: "2200",
	},
];

let formatNumber = function (num) {
	let reg = /(?=(\B)(\d{3})+$)/g;
	return num.toString().replace(reg, ",");
};
let total = echartData.reduce((a, b) => {
	return a + b.value * 1;
}, 0);

const option1 = {
	backgroundColor: bgColor,
	color: color,
	// tooltip: {
	//     trigger: 'item'
	// },
	title: [
		{
			text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
			top: "32%",
			left: "center",
			textStyle: {
				rich: {
					name: {
						fontSize: 12,
						fontWeight: "normal",
						color: "#666666",
						padding: [9, 0],
					},
					val: {
						fontSize: 20,
						fontWeight: "bold",
						color: "#333333",
					},
				},
			},
		},
	],
	legend: {
		orient: "horizontal",
		bottom: 10,
		itemWidth: 24,
		itemGap: 15,
		itemHeight: 14,
		align: "left",
		textStyle: {
			rich: {
				name: {
					fontSize: 12,
				},
				value: {
					fontSize: 16,
					padding: [0, 5, 0, 15],
				},
				unit: {
					fontSize: 12,
				},
			},
		},
		// formatter: function (name) {
		// 	let res = echartData.filter((v) => v.name === name);
		// 	res = res[0] || {};
		// 	let unit = res.unit || "";
		// 	return "{name|" + name + "}";
		// },
		// data: legendName
	},
	series: [
		{
			type: "pie",
			radius: ["45%", "70%"],
			center: ["50%", "45%"],
			data: echartData,
			hoverAnimation: false,
			itemStyle: {
				normal: {
					borderColor: bgColor,
					borderWidth: 2,
				},
			},
			labelLine: {
				normal: {
					length: 20,
					length2: 120,
					lineStyle: {
						color: "#e6e6e6",
					},
				},
			},
			label: {
				normal: {
					formatter: (params) => {
						return (
							"{icon|●}{name|" +
							"}{value|" +
							(params.value / total).toFixed(2) * 100 +
							"%}"
						);
					},
					padding: [0, -100, 25, -100],
					rich: {
						icon: {
							fontSize: 16,
						},
						name: {
							fontSize: 14,
							padding: [0, 10, 0, 4],
							color: "#666666",
						},
						value: {
							fontSize: 18,
							fontWeight: "bold",
							color: "#333333",
						},
					},
				},
			},
		},
	],
};

const option2 = {
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
	},
	legend: {
		data: ["培训人员", "考试人员"],
		align: "right",
		right: 10,
		textStyle: {},
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 35,
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		top: "10%",
		containLabel: true,
	},
	xAxis: [
		{
			type: "category",
			data: [
				"上港集团物流有限公司",
				"兴通海运有限公司",
				"中国石化化工销售有限公司",
				"上港集团物流有限公司",
				"兴通海运有限公司",
				"上港集团物流有限公司",
				"兴通海运有限公司",
				"中国石化化工销售有限公司",
			],
			axisLine: {
				show: true,
				lineStyle: {
					width: 1,
					type: "solid",
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				show: true,
				// rotate: 10,
				interval: 0,
				formatter: function (params) {
					let newParamsName = "";
					const paramsNameNumber = params.length; // 文字总长度
					const provideNumber = 6; //一行显示几个字
					const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
					if (paramsNameNumber > provideNumber) {
						for (let p = 0; p < rowNumber; p++) {
							const start = p * provideNumber;
							const end = start + provideNumber;
							const tempStr =
								p === rowNumber - 1
									? params.substring(start, paramsNameNumber)
									: params.substring(start, end) + "\n";
							newParamsName += tempStr;
						}
					} else {
						newParamsName = params;
					}
					return newParamsName;
				},

				textStyle: {},
			},
		},
	],
	yAxis: [
		{
			type: "value",
			axisLabel: {},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
				lineStyle: {
					width: 1,
					type: "solid",
				},
			},
			splitLine: {
				lineStyle: {},
			},
		},
	],
	series: [
		{
			name: "考试及格率",
			type: "line",
			data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
			itemStyle: {
				normal: {
					color: "#21CCFF",
					opacity: 1,
				},
			},
			smooth: true,
		},
	],
};

const option3 = {
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
	},
	legend: {
		data: ["培训人员", "考试人员"],
		align: "right",
		right: 10,
		textStyle: {},
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 35,
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		top: "10%",
		containLabel: true,
	},
	xAxis: [
		{
			type: "category",
			data: [
				"上港集团物流有限公司",
				"兴通海运有限公司",
				"中国石化化工销售有限公司",
				"上港集团物流有限公司",
				"兴通海运有限公司",
				"上港集团物流有限公司",
				"兴通海运有限公司",
				"中国石化化工销售有限公司",
			],
			axisLine: {
				show: true,
				lineStyle: {
					width: 1,
					type: "solid",
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				show: true,
				// rotate: 10,
				interval: 0,
				formatter: function (params) {
					let newParamsName = "";
					const paramsNameNumber = params.length; // 文字总长度
					const provideNumber = 6; //一行显示几个字
					const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
					if (paramsNameNumber > provideNumber) {
						for (let p = 0; p < rowNumber; p++) {
							const start = p * provideNumber;
							const end = start + provideNumber;
							const tempStr =
								p === rowNumber - 1
									? params.substring(start, paramsNameNumber)
									: params.substring(start, end) + "\n";
							newParamsName += tempStr;
						}
					} else {
						newParamsName = params;
					}
					return newParamsName;
				},

				textStyle: {},
			},
		},
	],
	yAxis: [
		{
			type: "value",
			axisLabel: {},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
				lineStyle: {
					width: 1,
					type: "solid",
				},
			},
			splitLine: {
				lineStyle: {},
			},
		},
	],
	series: [
		{
			name: "培训人员",
			type: "bar",
			data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
			barWidth: 13, //柱子宽度
			itemStyle: {
				normal: {
					color: "#246EFF",
					opacity: 1,
				},
			},
		},
		{
			name: "考试人员",
			type: "bar",
			data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
			barWidth: 13,
			itemStyle: {
				normal: {
					color: "#00B2FF",
					opacity: 1,
				},
			},
		},
	],
};

const tableData = ref([]);
</script>

<template>
	<!-- <page-content> -->
		<div class="homePage">
			<div class="statisticContent">
				<div class="contentBox">
					<div class="dataBox" v-for="(item, i) in statisticData1" :key="i">
						<div class="dataContent">
							{{ item.title }}
							<div class="dataCount">
								<img :src="item.img" />{{ toThousands(item.count)
								}}{{ item.unit }}
							</div>
							<div class="dataRate">
								{{ item.subTitle }} <span>{{ item.subCount }}</span
								>{{ item.unit }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="bottomContent">
				<div class="leftBox">
					<div
						style="
							width: 100%;
							height: 49%;
							display: flex;
							justify-content: space-between;
						"
					>
						<div class="chartContent1">
							<div class="contentTitle">安全培训人员进度状态统计</div>
							<div id="chartBox1" class="chartBox" style="padding-top: 10px;">
								<!-- <BaseEchart :option="option1"></BaseEchart> -->
							</div>
						</div>
						<div class="chartContent2">
							<div class="contentTitle">考试及格率</div>
							<div id="chartBox2" class="chartBox">
								<!-- <BaseEchart :option="option2"></BaseEchart> -->
							</div>
						</div>
					</div>
					<div class="chartContent3">
						<div class="contentTitle">参与培训与考试人员统计</div>
						<div id="chartBox3" class="chartBox">
							<!-- <BaseEchart :option="option3"></BaseEchart> -->
						</div>
					</div>
				</div>
				<div class="rightBox">
					<div class="contentTitle" style="margin-bottom: 10px">
						入驻企业清单
					</div>
          <div class="tableContainer">
            <el-table
						:data="tableData"
						style="width: 100%; height: calc(100% - 40px)"
					>
						<el-table-column
							prop="name"
							label="公司名称"
							width="160"
              show-overflow-tooltip
							align="left"
						/>
						<el-table-column prop="total" label="人员数量" />
					</el-table>
          </div>
				
				</div>
			</div>
		</div>
	<!-- </page-content> -->
</template>

<style lang="scss" scoped>
.homePage {
	width: 98%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	overflow-y: auto;
	position: relative;
  background: #F7F8FA;
  margin: 20px;

	.statisticContent {
		width: 100%;
		height: 20%;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;

		.contentBox {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0px 3.5vh;

			.dataBox {
				width: 18%;
				height: 90%;
				background-repeat: no-repeat;
				background-position: 96% 68%;
        border-radius: 4px;
        overflow: hidden;

				.dataContent {
					width: 80%;
					height: 100%;
					padding: 1vw 1vh;
					font-size: 1vw;
					font-weight: 600;

					.dataCount {
						font-size: 1.5vw;
						letter-spacing: 1px;
						margin-top: 0.2vh;
						font-weight: 600;
						display: flex;
						align-items: center;

						img {
							width: 30px;
							height: 30px;
						}
					}

					.dataRate {
						width: 100%;
						height: 30px;
						margin-top: 0.15vh;
						display: flex;
						font-size: 13px;

						span {
							font-size: 16px;
							line-height: 17px;
							margin: 0px 4px 0px 4px;
						}

						.rateContent {
							color: rgba(43, 164, 113, 1);
							background-color: rgba(227, 249, 233, 1);
							display: flex;
							align-items: center;
							width: 80px;
							height: 20px;
						}
					}
				}

				&:nth-child(1) {
					background-image: url("./assets/sta1.png");
					background-color: rgba(230, 244, 254, 0.719);
				}

				&:nth-child(2) {
					background-image: url("./assets/sta2.png");
					background-color: rgba(230, 254, 238, 0.719);
				}

				&:nth-child(3) {
					background-image: url("./assets/sta1.png");
					background-color: rgba(230, 244, 254, 0.719);
				}

				&:nth-child(4) {
					background-image: url("./assets/sta4.png");
					background-color: rgba(236, 236, 255, 0.719);
				}

				&:nth-child(5) {
					background-image: url("./assets/sta5.png");
					background-color: rgba(255, 228, 228, 0.719);
				}
			}
		}
	}

	.bottomContent {
		width: 100%;
		height: 79%;
    margin-top: 15px;
		display: flex;
		justify-content: space-between;

		.contentTitle {
			width: 100%;
			height: 30px;
      padding-top: 10px;
      padding-left: 20px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 1000;
      // font-size: 16px;
      color: #1D2129;
		}

		.chartBox {
			width: 100%;
			height: calc(100% - 30px);
		}

		.leftBox {
			width: 73%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}

		.rightBox {
			width: 26%;
			height: 100%;
      background: #FFFFFF;
      .tableContainer{
        width:100%;
        // height:calc(100% - 40px);
        padding:0px 20px;
      }
			:deep(.el-table__cell) {
				background-color: transparent;
			}
      :deep(.el-table) {
				border-left: 0;
        border-right: 0;
			}
		}

		.chartContent1 {
			width: 35%;
			height: 100%;
      background: #FFFFFF;
      border-radius: 4px;
      overflow: hidden;
		}

		.chartContent2 {
			width: 64%;
			height: 100%;
      background: #FFFFFF;
      border-radius: 4px;
      overflow: hidden;
		}

		.chartContent3 {
			width: 100%;
			height: 49%;
      background: #FFFFFF;
      border-radius: 4px;
      overflow: hidden;
		}
	}
}
</style>
